import React from 'react';

const CustomFontSizeGuide: React.FC = () => {
  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8 text-center text-primary">Tailwind 自定义字体大小使用指南</h1>
      
      {/* 介绍部分 */}
      <div className="mb-10 bg-blue-50 p-6 rounded-lg shadow-sm">
        <h2 className="text-xl font-semibold mb-4">关于自定义字体大小</h2>
        <p className="mb-4">
          在 <code className="bg-gray-200 px-1 py-0.5 rounded">tailwind.config.js</code> 文件中，我们定义了三组自定义字体大小：
        </p>
        <ol className="list-decimal list-inside space-y-2 pl-4">
          <li>基础字体大小（<code className="bg-gray-200 px-1 py-0.5 rounded">tiny, small, regular, large, xlarge</code>）</li>
          <li>标题字体大小（<code className="bg-gray-200 px-1 py-0.5 rounded">h1, h2, h3, h4, h5</code>）</li>
          <li>移动端优化字体大小（<code className="bg-gray-200 px-1 py-0.5 rounded">mobile-h1, mobile-h2, mobile-h3</code>）</li>
        </ol>
      </div>

      {/* 基础使用方法 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">基础使用方法</h2>
        <p className="mb-4">使用自定义字体大小非常简单，只需将配置中的键名作为Tailwind类名的一部分，格式为 <code className="bg-gray-200 px-1 py-0.5 rounded">text-{'{'}size{'}'}</code>。</p>
        
        <div className="space-y-6">
          <div>
            <h3 className="text-lg font-medium mb-2">基础字体大小使用示例：</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-gray-50 p-4 rounded border">
                <p className="text-tiny mb-2">这是使用 text-tiny (10px) 的文字</p>
                <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-tiny">这是使用 text-tiny 的文字</p>'}</code>
              </div>
              <div className="bg-gray-50 p-4 rounded border">
                <p className="text-small mb-2">这是使用 text-small (12px) 的文字</p>
                <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-small">这是使用 text-small 的文字</p>'}</code>
              </div>
              <div className="bg-gray-50 p-4 rounded border">
                <p className="text-regular mb-2">这是使用 text-regular (16px) 的文字</p>
                <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-regular">这是使用 text-regular 的文字</p>'}</code>
              </div>
              <div className="bg-gray-50 p-4 rounded border">
                <p className="text-large mb-2">这是使用 text-large (18px) 的文字</p>
                <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-large">这是使用 text-large 的文字</p>'}</code>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 响应式字体大小 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">响应式字体大小</h2>
        <p className="mb-4">可以结合Tailwind的响应式前缀（sm:, md:, lg:等）来根据屏幕尺寸使用不同的字体大小。</p>
        
        <div className="bg-gray-50 p-6 rounded-lg border mb-4">
          <h3 className="text-lg font-medium mb-3">响应式字体大小示例：</h3>
          <p className="text-regular sm:text-large mb-4">
            在小屏幕上使用 text-regular (16px)，在中等及以上屏幕上使用 text-large (18px)
          </p>
          <code className="text-xs bg-gray-200 px-1 py-0.5 rounded block mb-2">
            {'<p className="text-regular sm:text-large">响应式字体大小</p>'}
          </code>
          
          <p className="text-mobile-h1 sm:text-h1 mb-4">
            在小屏幕上使用 text-mobile-h1 (32px)，在中等及以上屏幕上使用 text-h1 (40px)
          </p>
          <code className="text-xs bg-gray-200 px-1 py-0.5 rounded block">
            {'<p className="text-mobile-h1 sm:text-h1">响应式标题</p>'}
          </code>
        </div>
        
        <div className="bg-blue-50 p-4 rounded-lg">
          <h4 className="font-medium mb-2">最佳实践：</h4>
          <p className="text-sm">
            对于标题文本，建议在小屏幕上使用 mobile-* 系列字体大小，在中等及以上屏幕上使用标准 h* 系列字体大小，
            这样可以确保在各种设备上都有良好的可读性。
          </p>
        </div>
      </div>

      {/* 结合其他Tailwind类 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">结合其他Tailwind类</h2>
        <p className="mb-4">自定义字体大小可以与其他Tailwind类（如字体粗细、颜色等）结合使用。</p>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-gray-50 p-4 rounded border">
            <h3 className="text-h2 font-bold text-primary mb-2">粗体标题</h3>
            <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<h3 className="text-h2 font-bold text-primary">粗体标题</h3>'}</code>
          </div>
          <div className="bg-gray-50 p-4 rounded border">
            <p className="text-large italic text-secondary mb-2">斜体文本</p>
            <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-large italic text-secondary">斜体文本</p>'}</code>
          </div>
          <div className="bg-gray-50 p-4 rounded border">
            <p className="text-regular font-semibold mb-2">半粗体文本</p>
            <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-regular font-semibold">半粗体文本</p>'}</code>
          </div>
          <div className="bg-gray-50 p-4 rounded border">
            <p className="text-small text-center mb-2">居中对齐文本</p>
            <code className="text-xs bg-gray-200 px-1 py-0.5 rounded">{'<p className="text-small text-center">居中对齐文本</p>'}</code>
          </div>
        </div>
      </div>

      {/* 实际应用场景 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">实际应用场景示例</h2>
        
        <div className="bg-white p-6 rounded-lg shadow-sm border">
          <h3 className="text-h1 sm:text-h1 font-bold mb-2">产品标题</h3>
          <h4 className="text-h3 text-secondary mb-4">产品副标题</h4>
          
          <p className="text-regular mb-4">
            这是产品描述文本，使用text-regular确保良好的可读性。描述内容应该简洁明了，突出产品的主要特点和优势。
          </p>
          
          <div className="bg-gray-50 p-4 rounded-lg mb-4">
            <h5 className="text-lg font-semibold mb-2">产品特点</h5>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <span className="text-primary mt-1">•</span>
                <span className="text-regular">特点一：详细描述产品的第一个特点</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary mt-1">•</span>
                <span className="text-regular">特点二：详细描述产品的第二个特点</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary mt-1">•</span>
                <span className="text-regular">特点三：详细描述产品的第三个特点</span>
              </li>
            </ul>
          </div>
          
          <div className="text-right">
            <p className="text-tiny text-gray-500">© 2023 版权所有</p>
          </div>
        </div>
      </div>

      {/* 配置参考 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">tailwind.config.js 配置参考</h2>
        <div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
          <pre className="text-sm">
{`// tailwind.config.js 中的字体大小配置
export default {
  // ...其他配置
  theme: {
    extend: {
      // ...其他扩展配置
      fontSize: {
        // 基础字体大小
        'tiny': '0.625rem',  // 10px
        'small': '0.75rem',  // 12px
        'regular': '1rem',   // 16px (默认)
        'large': '1.125rem', // 18px
        'xlarge': '1.25rem', // 20px
        
        // 标题字体大小
        'h1': '2.5rem',      // 40px
        'h2': '2rem',        // 32px
        'h3': '1.75rem',     // 28px
        'h4': '1.5rem',      // 24px
        'h5': '1.25rem',     // 20px
        
        // 移动端优化字体大小
        'mobile-h1': '2rem',     // 32px
        'mobile-h2': '1.5rem',   // 24px
        'mobile-h3': '1.25rem',  // 20px
      }
    },
    // ...其他主题配置
  },
  // ...其他配置
}`}
          </pre>
        </div>
      </div>

      {/* 最佳实践建议 */}
      <div className="bg-green-50 p-6 rounded-lg">
        <h2 className="text-xl font-semibold mb-4">最佳实践建议</h2>
        <ul className="space-y-3">
          <li className="flex items-start gap-2">
            <span className="text-green-600 font-bold">✓</span>
            <span>使用语义化的HTML标签（h1-h6, p, span等）配合合适的字体大小类</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-green-600 font-bold">✓</span>
            <span>为不同屏幕尺寸设计响应式字体大小，确保在所有设备上都有良好的可读性</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-green-600 font-bold">✓</span>
            <span>保持一致的字体层级关系，使页面结构清晰</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-green-600 font-bold">✓</span>
            <span>结合字体粗细和颜色，创建视觉层次感</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-green-600 font-bold">✓</span>
            <span>在设置字体大小时，考虑行高（line-height）以提高可读性</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default CustomFontSizeGuide;